<template>
  <view class="note-details">
    <c-navBar
      class="nav_bar"
      title="笔记详情"
      :isTran="TRUE"
      isPerch
    ></c-navBar>
    <view style="height: 80rpx"></view>
    <view :style="{ top: `${navHeight}px` }" class="p30 noteNav pf bs">
      <view class="dis_sb bs">
        <view class="df aic">
          <image
            style="width: 75rpx; height: 75rpx; border-radius: 50%"
            :src="detalil.avatar"
          />
          <view class="ml10">
            <view
              style="
                max-width: 160rpx;
                font-weight: 400;
                font-size: 30rpx;
                color: #000000;
                line-height: 36rpx;
                opacity: 0.9;
              "
              class="clo-333 cont1"
              >{{ detalil.userName }}</view
            >
          </view>
        </view>
        <view>
          <u-button
            iconColor="#666"
            @click="toCollectList"
            type="primary"
            :hairline="true"
            :plain="true"
            text="我的收藏"
          ></u-button>
        </view>
      </view>
    </view>

    <view style="width: 750rpx;">
      <u-swiper
        :mode="'number'"
        :list="detalil.bannerList"
        indicatorMode="number"
        keyName="imgs"
        name="imgs"
        height="500"
        circular
        :autoplay="false"
        img-mode="aspectFit"
        bg-color="white"
      ></u-swiper>
	  
    </view>

    <view class="p30" style="padding-top: 20rpx;">
      <view
        style="
          font-size: 42rpx;
          color: #000000;
          line-height: 45rpx;
          font-weight: 550;
        "
        class="fwb mb20"
        >{{ detalil.title }}</view
      >
      <u-parse :content="detalil.remark"></u-parse>
      <view class="f26 mt20 clo-666"> 发布时间:{{ detalil.createTime }} </view>
    </view>
    <view style="height: 220rpx"></view>
    <view class="control bs">
      <view class="dis_sb bs p10" style="padding: 10px">
        <view class="co-left bs df f28 aic jcc">
          <view
            style="
              width: 50rpx;
              height: 50rpx;
              overflow: hidden;
              border-radius: 5rpx;
            "
          >
            <image
              v-if="detalil.goodsId"
              style="width: 100%"
              :src="detalil.goodsCover"
              mode="widthFix"
            />
          </view>
          <view
            v-if="detalil.goodsId"
            class="clo-666 ml10 tac"
            @click="confirmBuy"
          >
            <view class="f24">购买同款</view>
            <view class="f20">￥{{ detalil.price ? detalil.price : 0 }}</view>
          </view>
          <view
            class="clo-666 ml10 tac"
            v-if="!detalil.goodsId"
            style="font-size: larger; letter-spacing: 1px"
            >等待补货</view
          >
        </view>

        <view class="co-right df bs aic jcfe" style="margin-right: 15px">
          <view class="co-one df aic mr30" @click="clickArticle('like')">
            <image
              :src="
                detalil.myLike == 1
                  ? `/static/tabbar/collect-active.png`
                  : `/static/tabbar/collect.png`
              "
              mode=""
            ></image>
            <view class="ml10">{{ detalil.totalLikeNum }}</view>
          </view>
          <view
            open-type="contact"
            bindcontact="handleContact"
            class="btn-clear df mr30 aic co-one"
            @click="clickArticle('collect')"
          >
            <image
              :src="
                detalil.myCollect == 0
                  ? `./static/collect.png`
                  : `./static/collect-a.png`
              "
              mode=""
            ></image>
            <view class="ml20">{{ detalil.totalCollectNum }}</view>
          </view>
          <button
            style="
              background-color: #fff !important;
              border: 1rpx solid #fff !important;
              padding: 0 !important;
            "
            class="df share_button jcc"
            open-type="share"
            type="text"
          >
            <image :src="require('./static/control-op2.png')" mode=""></image>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  init_noteDetails,
  init_updateLike,
  init_noteCollect,
} from "@/api/node.js";

export default {
  data() {
    return {
      navHeight: null,
      detalil: {},
    };
  },

  onReady() {
    setTimeout(() => {
      let query = wx.createSelectorQuery();
      query
        .select(".nav_bar")
        .boundingClientRect((rect) => {
          let height = rect.height;
          this.navHeight = height;
        })
        .exec();
    }, 300);
  },
  onLoad(v) {
    this.getList(v?.noteId);
  },

  methods: {
    async getList(id) {
      const res = await init_noteDetails(id);
      this.detalil = res;
      this.detalil.bannerList = res?.url.split(",");
    },
    toCollectList() {
      uni.navigateTo({
        url: `/pages/note/collect`,
      });
    },

    onShareAppMessage(res) {
      const that = this;
      const { title, cover } = that.detalil;
      return {
        title: title,
        path: `pages/tabbar/home`,
        imageUrl: cover,
      };
    },

    async clickArticle(v) {
      const obj = {
        collect: init_noteCollect,
        like: init_updateLike,
      };
      const { id, myCollect, myLike } = this.detalil;
      // userId，nodeId，myCollect(0-否 1-收藏)
      const params = {
        like: {
          noteId: id,
          myLike: myLike == 0 ? 1 : 0,
        },
        collect: {
          noteId: id,
          myCollect: myCollect == 0 ? 1 : 0,
        },
      };
      const res = await obj[v](params[v]);
      if (res) {
        this.getList(id);
      }
    },
    confirmBuy() {
      uni.navigateTo({
        url: `/pages/goods/pages/goodsDetails?id=${this.detalil?.goodsId}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.note-details {
  letter-spacing: 1px;
}
/deep/.u-button--primary {
  border-color: #666 !important;
}
/deep/.u-button {
  color: #666 !important;
  border-radius: 40rpx !important;
  height: 50rpx !important;
  font-size: 26rpx !important;
}

.noteNav {
  width: 750rpx;
  z-index: 66;
  background-color: #fff;
}
.control {
  width: 750rpx;
  height: 128rpx;
  position: fixed;
  bottom: 0;
  background: #fff;
  padding-bottom: var(--iphonex-fix-bottom);
  --iphonex-fix-bottom: env(safe-area-inset-bottom);

  .co-left {
    padding: 10rpx 0;
    width: 260rpx;
    height: 70rpx;
    background: #ebebeb;
    border-radius: 35rpx;
  }

  .co-right {
    .co-one {
      text-align: center;
      font-weight: 400;
      font-size: 31rpx;
      color: #000000;
      line-height: 48rpx;
    }
    image {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 2rpx;
    }
  }
}
.share_button::after {
  border: 1rpx solid #fff !important;
}
</style>
